<script>
import { mapState } from 'vuex'
// import config from '@govcloud/gsd-web-core-config'
import { directive as clickOutside } from 'v-click-outside-x'

export default {
  directives: {
    clickOutside
  },
  data() {
    const instance = this
    return {
      instance
    }
  },
  computed: {
    ...mapState('global', {
      currentEntry: 'currentEntry',
      entry: 'entry',
      entryList: 'entryList',
      menuMode: 'menuMode'
    }),
    subList() {
      const obj = {}
      this.entryList.forEach(item => {
        if (Array.isArray(item)) {
          obj[item[0]] = {
            arrow: 0,
            status: 0,
            list: [].concat(item.slice(1))
          }
        }
      })
      return obj
    },
    selectedKeys() {
      return [this.currentEntry]
    }
    // isInterrelationMode() {
    //   return this.menuMode === 'interrelation'
    // }
  },

  mounted() {
    this.setCurrentEntry()
  },

  methods: {
    onClickHandler(item) {
      if (item.action) {
        item.action()
      } else {
        window.location = item.url
      }
    },

    setCurrentEntry() {
      const entryBase = this.$router.options.base
      const entry = this.$route.fullPath.split(entryBase)[1] || 'index'
      this.$store.commit(
        `global/${this.$storeGlobalTypes.SET_CURRENT_ENTRY}`,
        entry
      )
    },

    renderEntryList() {
      return this.entryList.map((item, index) => {
        let icon = null

        // 如果该子元素是拥有2级菜单
        if (Array.isArray(item)) {
          const isSubList =
            this.subList[item[0]] && this.subList[item[0]].list.length

          // 准备2级菜单
          let subListItem = null

          if (isSubList) {
            // 处理2级菜单
            subListItem = this.subList[item[0]].list.map(
              (child, childIndex) => {
                return (
                  <a-menu-item
                    key={childIndex}
                    onClick={this.onClickHandler.bind(this, child)}
                  >
                    {child.name}
                  </a-menu-item>
                )
              }
            )
          }

          // 处理图标
          if (this.entry[item[0]].icon) {
            icon =
              typeof this.entry[item[0].icon] === 'function' ? (
                this.entry[item[0]].icon
              ) : (
                <i class={this.entry[item[0]].icon} />
              )
          }

          return (
            <a-sub-menu key={item[0]}>
              <div slot="title" class="submenu-title-wrapper">
                {icon}
                <span class="header-entry__name">
                  {this.entry[item[0]].name}
                </span>
              </div>
              {subListItem}
            </a-sub-menu>
          )
        } else {
          if (this.entry[item].icon) {
            icon =
              typeof this.entry[item].icon === 'function' ? (
                this.entry[item].icon()
              ) : (
                <i class={this.entry[item].icon} />
              )
          }

          return (
            <a-menu-item
              key={item}
              onClick={this.onClickHandler.bind(this, this.entry[item])}
            >
              {icon}
              <span class="header-entry__name">{this.entry[item].name}</span>
            </a-menu-item>
          )
        }
      })
    }
  },

  render(h) {
    const EntryList = this.renderEntryList()

    const className = {
      'header-entry': true,
      dark: true
    }

    return (
      <a-menu
        mode="horizontal"
        class={className}
        selected-keys={this.selectedKeys}
      >
        {EntryList}
      </a-menu>
    )
  }
}
</script>

<style lang="scss" src="./entry.scss"></style>
